<template>
  <el-card class="collection-filter" shadow="never">
    <el-form :model="localQueryParams" label-width="100px" label-position="left">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="客户名称">
            <el-input
              v-model="localQueryParams.customerName"
              placeholder="请输入客户名称"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="催款方式">
            <el-select
              v-model="localQueryParams.collectionMethod"
              placeholder="请选择催款方式"
              clearable
              style="width: 100%"
            >
              <el-option label="电话催款" value="phone" />
              <el-option label="邮件催款" value="email" />
              <el-option label="上门催款" value="visit" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="催款结果">
            <el-input
              v-model="localQueryParams.collectionResult"
              placeholder="请输入催款结果"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="催款日期">
            <el-date-picker
              v-model="localQueryParams.dateRange"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-form-item>
        <el-button type="primary" @click="handleSearch">
          <el-icon><Search /></el-icon>搜索
        </el-button>
        <el-button @click="handleReset">
          <el-icon><Refresh /></el-icon>重置
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'

interface CollectionQueryParams {
  customerName: string
  collectionMethod: string
  collectionResult: string
  dateRange: string[]
  page: number
  limit: number
}

interface Props {
  queryParams: CollectionQueryParams
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'update:query-params', params: CollectionQueryParams): void
  (e: 'search'): void
  (e: 'reset'): void
}>()

// 本地查询参数
const localQueryParams = reactive<CollectionQueryParams>({ ...props.queryParams })

// 监听属性变化
watch(
  () => props.queryParams,
  (newVal) => {
    Object.assign(localQueryParams, newVal)
  },
  { deep: true }
)

// 监听本地参数变化并向上同步
watch(
  localQueryParams,
  (newVal) => {
    emit('update:query-params', { ...newVal })
  },
  { deep: true }
)

const handleSearch = () => {
  emit('search')
}

const handleReset = () => {
  Object.assign(localQueryParams, {
    customerName: '',
    collectionMethod: '',
    collectionResult: '',
    dateRange: [],
    page: 1,
    limit: 20
  })
  emit('reset')
}
</script>

<style scoped lang="scss">
.collection-filter {
  margin-bottom: 20px;
}
</style>